<template>
	<div id="app">
		<iMenu accordion :active-name="activeName">
			<MenuItem name="/SizeObserverEG" to="/SizeObserverEG">元素大小监听</MenuItem>
			<MenuItem name="/IframeLoadEG" to="/IframeLoadEG">iframe加载</MenuItem>
			<MenuItem name="/PagePithyEG" to="/PagePithyEG">分页</MenuItem>
			<MenuItem name="/StepContainerEG" to="/StepContainerEG">步骤条</MenuItem>
			<MenuItem name="/TextEllipsisEG" to="/TextEllipsisEG">文字省略</MenuItem>
			<MenuItem name="图片预览">图片预览</MenuItem>
			<MenuItem name="图片上传">图片上传</MenuItem>
			<MenuItem name="绘制svg">绘制svg</MenuItem>
			<Submenu name="表单">
				<template #title>表单</template>
				<MenuItem name="自适应文本域">自适应文本域</MenuItem>
				<MenuItem name="输入框">输入框</MenuItem>
			</Submenu>
			<Submenu name="表格">
				<template #title>表格</template>
				<MenuItem name="表格">表格</MenuItem>
				<MenuItem name="特殊树表">特殊树表</MenuItem>
			</Submenu>
			<Submenu name="报表">
				<template #title>报表</template>
				<MenuItem name="饼状图">饼状图</MenuItem>
				<MenuItem name="柱状图">柱状图</MenuItem>
				<MenuItem name="折线图">折线图</MenuItem>
			</Submenu>
		</iMenu>
		<div class="head">
			<div style="text-align:center;padding:0 15px;">
				<div>移动端</div>
				<iSwitch key="Pc" :value="mobile" @input="$emit('update:mobile',$event)" size="small"/>
			</div>
		</div>
		<router-view class="body"/>
	</div>
</template>

<script>
	import Vue from 'vue';
	import VueRouter from 'vue-router';
	Vue.use(VueRouter);
	const router = new VueRouter({
		routes:[
			{path:'/SizeObserverEG',component:() => import('./doc/SizeObserverEG.vue')},
			{path:'/IframeLoadEG',component:() => import('./doc/IframeLoadEG.vue')},
			{path:'/PagePithyEG',component:() => import('./doc/PagePithyEG.vue')},
			{path:'/StepContainerEG',component:() => import('./doc/StepContainerEG.vue')},
			{path:'/TextEllipsisEG',component:() => import('./doc/TextEllipsisEG.vue')}
		]
	});
	export default{
		name:'Pc',
		router,
		props:{
			mobile:Boolean
		},
		data(){
			return {
				activeName:''
			};
		},
		created(){
			console.log('Pc');
			this.$router.afterEach((to,from) => {
				this.activeName=to.path;
			});
		}
	};
</script>

<style lang="scss">

</style>
